<template>
  <div>
    <h3>主页面</h3>
    <!-- userName  跟后端保持一致 -->
    <p>
        <!-- 从vuex里面读取数据 -->
        欢迎：{{ $store.state.user.userName }}
        <el-button @click="logout">退出</el-button>
    
    
    </p>
  </div>
</template>

<script>
export default {
    data(){
        return{
            user_obj:{},
        }
    },
    mounted(){
        // 页面加载时读取（内存中的数据字符串）用户数据    刷新时用户名还在
        let user_json = localStorage.getItem('user')
        if(user_json){
            // 如果已经保存了用户信息   将对象解析成字符串parse  又保存到vuex里
            let user_obj=JSON.parse(user_json)
            this.$store.commit('setUser',user_obj)
        }
    },
    methods:{
        logout(){
            // 将用户信息删除
            localStorage.removeItem('user')
            // token里面的数据删除
            localStorage.removeItem('token')
            // 将vuex中的 数据设置为空
            this.$store.commit('setUser',{})
        }
    }

}
</script>

<style>

</style>